<template>
  <div class="app-container">
    <el-container>
      <!-- 顶栏容器 -->
      <el-header height="60px;">
        <!-- 公共头 -->
        <myheader />
      </el-header>
      <!-- 分割线 -->
<el-carousel :interval="4000" arrow="always" height="200px" style="margin-bottom: 10px;"  >  
        <el-carousel-item v-for="item in items" :key="item.id">  
          <img :src="item.image" :alt="item.alt" style="width: 100%; height: 100%; object-fit: cover;" />  
        </el-carousel-item>  
      </el-carousel>  


      <!-- 主要区域容器 -->
      <el-main style="padding: 0px; margin-top: 0px">
        <div class="main-container">
          <nuxt />
        </div>
      </el-main>
      <!-- 底栏容器 -->
      <!-- <el-footer>
        <myfooter />
      </el-footer> -->
    </el-container>
  </div>
</template>
<script>
import myheader from "./myheader";
import myfooter from "./myfooter";
export default {
  components: {
    myheader,
    myfooter,
  },
  data() {  
    return {  
      items: [  
        { id: 1, image: 'https://school-nav.oss-cn-beijing.aliyuncs.com/%E5%91%BD%E5%90%8D.png', alt: 'Image 1' },  
        // { id: 2, image: 'https://example.com/image2.jpg', alt: 'Image 2' },  
        // { id: 3, image: 'https://example.com/image3.jpg', alt: 'Image 3' },  
      ],  
    };  
  },
};
</script>
<style>
.el-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}
.el-main {
  overflow: visible !important;
}
/* .el-message {
  z-index: 99999999 !important;
}
.el-notification {
  z-index: 99999999 !important;
} */
</style>
